<script setup lang="ts">
import _ from "lodash";
import {computed, onBeforeMount, ref} from 'vue';
import heartSentenceArray from '@/util/heartSentenceArray';
import {calculateTimeDifference, ECode} from "@/util/commonUtil";
import {useAppConfigStore} from "@/store/system/appConfigStore";
import {getLink} from "@/api/footer/footer";

const heartSentence = computed(() => {
  return _.sample(heartSentenceArray);
});

const days = computed(() => calculateTimeDifference(useAppConfigStore().createTime))
const linkList = ref<any>([])

onBeforeMount(() => {
  getLinkList()
})

function getLinkList() {
  getLink().then((response: any) => {
    if (response.code === ECode.SUCCESS) {
      if (response.data.length > 10) {
        linkList.value = _.sampleSize(response.data, 10)
      } else {
        linkList.value = response.data
      }
    }
  })
}
</script>

<template>
  <div class="footer-menu relative flex flex-col lg:flex-row">
    <div class="footer-left flex flex-col justify-between">
      <div class="footer-tens">
        <h6 class="footer-title">今天是风起的</h6>
        <h2 class="days">第{{ days }}天星辰</h2>
      </div>
      <div class="footer-rand">
        <h6 class="footer-title has-line-clamp">随机一言</h6>
        <span class="post">{{ heartSentence }}</span>
      </div>
    </div>
    <div class="footer-friends">
      <h6 class="footer-title">壹行随十人</h6>
      <ul class="list-none">
        <template v-for="item in linkList">
          <li class="overflow-hidden">
            <a :href="item.url" rel="noopener" :title="item.summary" target="_blank">{{ item.title }}</a>
          </li>
        </template>
      </ul>
    </div>
  </div>
</template>

<style lang="less" scoped>
.footer-menu {
  gap: var(--edge-lr);
  padding: var(--edge-lr);
  background: radial-gradient(circle at 0 50%, hsl(var(--main-color) / .1) 55%, hsl(var(--subs-color) / .05) 60%);
}

.footer-left {
  gap: var(--gap-divs);
  flex: 2;
}

.footer-title {
  opacity: .6;
  margin: 0 0 1em;
  font-size: var(--font-size-small);
}

.footer-tens .days {
  font-size: 3em;
  mask: linear-gradient(#000000e6, #00000080);
  color: hsl(var(--main-color) / .6);
  font-family: var(--font-family-slogn);
  line-height: 1;
}

.footer-rand {
  width: min(50em, 100%);
}

.has-line-clamp {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  line-clamp: var(--line-num, 1);
}

.footer-friends ul {
  display: grid;
  grid: auto / repeat(2, 1fr);
  gap: 1.75em;
}

.footer-friends ul li {
  text-transform: capitalize;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.footer-friends ul li a::after {
  content: "" attr(title) "";
  font-size: var(--font-size-small);
  opacity: .6;
  margin: 0 0 0 1em;
}
</style>
